import React, { useRef, useEffect } from 'react';

const ChatInput = ({ 
    inputValue, 
    setInputValue, 
    onSend, 
    isLoading, 
    isGenerating,
    onStop,
    onKeyDown,
    disabled = false
}) => {
    const textareaRef = useRef(null);

    // 自动调整输入框高度
    useEffect(() => {
        const textarea = textareaRef.current;
        if (textarea) {
            textarea.style.height = 'auto';
            const scrollHeight = textarea.scrollHeight;
            const maxHeight = 100; // 对应CSS中的max-height
            textarea.style.height = Math.min(scrollHeight, maxHeight) + 'px';
        }
    }, [inputValue]);

    const handleInputChange = (e) => {
        setInputValue(e.target.value);
    };

    const handleContainerClick = (e) => {
        // 如果点击的不是按钮，就聚焦到输入框
        if (!e.target.closest('.send-btn') && textareaRef.current) {
            textareaRef.current.focus();
        }
    };

    return (
        <div className="input-area">
            <div className="input-container" onClick={handleContainerClick}>
                <textarea
                    ref={textareaRef}
                    className="message-input"
                    value={inputValue}
                    onChange={handleInputChange}
                    onKeyDown={onKeyDown}
                    placeholder={
                        disabled ? "请先创建会话..." : 
                        isGenerating ? "AI正在生成回复，请稍候..." : 
                        "请输入您的问题..."
                    }
                    rows={1}
                    disabled={disabled || isGenerating}
                />
                <div className="input-actions">
                    {isGenerating ? (
                        <button
                            className="stop-btn"
                            onClick={onStop}
                            title="停止生成"
                        >
                            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
                                <rect x="6" y="6" width="12" height="12" rx="2"></rect>
                            </svg>
                        </button>
                    ) : (
                        <button
                            className="send-btn"
                            onClick={onSend}
                            disabled={isLoading || !inputValue.trim() || disabled}
                            title="发送消息 (Enter)"
                        >
                            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
                                <line x1="22" y1="2" x2="11" y2="13"></line>
                                <polygon points="22,2 15,22 11,13 2,9"></polygon>
                            </svg>
                        </button>
                    )}
                </div>
            </div>
        </div>
    );
};

export default ChatInput;